<template>
	<view>
		<view class="info-list">
			<uni-list>
				<uni-list-item direction="row" v-for="item in (infoDataPage?.result || [])" :key="item.id"
					:title="item.title" :note="item.author + ' '+formatTime(item.updateTime)" @click="goToDetail(item.id)" clickable="true">
					<template v-slot:header>
						<image class="image-1" :src="item.avatar" mode="aspectFill"></image>
					</template>
				</uni-list-item>
			</uni-list>
		</view>
		<view class="back-to-top" :style="{'display':(topState===true? 'block':'none')}">
			<uni-icons class="topc" type="arrowthinup" size="50" @click="backToTop"></uni-icons>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onPageScroll } from '@dcloudio/uni-app';
	import { ref } from 'vue';
	import {formatTime} from '@/utils/formatUtils'
	import { InfoDataPage } from '@/entity/home/InfoDataPage';

	const infoDataPage = ref<InfoDataPage | null>(null);
	const topState = ref<boolean>(false);
	const backToTop = () => {
		//回到顶部  
		uni.pageScrollTo({
			scrollTop: 0, duration: 300
		});
	}
	const goToDetail = (id :string) => {
		console.log("即将跳转，参数: "+ id)
		uni.navigateTo({
			url: `/pages/info-detail/info-detail?id=${id}`
		})
	}
	onPageScroll((e) => {
		if (e.scrollTop > 600) { //当距离大于600时显示回到顶部按钮
			topState.value = true
		} else { //当距离小于600时显示回到顶部按钮
			topState.value = false
		}
	})
	const goToDetailPage = (id : string) => {
		console.log("即将跳转，参数: " + id)
		uni.navigateTo({
			url: `/pages/info-detail/info-detail?id=${id}`
		})
	};
</script>

<style>
	 /* 回到顶部 */
	 .back-to-top {
	 	position: relative;
	 	display: none;
	 	/* 先将元素隐藏 */
	 }
	 
	 .topc {
	 	position: fixed;
	 	right: 0;
	 	background: #a9a9a9;
	 	top: 70%;
	 	height: 50px;
	 	line-height: 50px;
	 	border-radius: 50%;
	 }      
</style>
